import React, { Component } from 'react'
import { connect } from 'react-redux'
import { getCartProducts, getTotal, getMessage, getCheckoutPending } from '../../redux/reducers';
import { removeFromCart, checkout } from '../../redux/actions/productAction';
import CartItem from './CartItem';

class Cart extends Component {
  render() {
    // 从props上获取需要的数据
    // 注意下面的mapDispatchToProps属性，例如 checkout
    // 并不是上面引入的checkout,而是映射到props上的checkout,所以需要从 props上获取
    // 如果直接使用，会导致方法没有连接到redux,不会有任何反应
    const { products, checkout, removeFromCart, total, message, pending } = this.props;
    // 判断结算属性
    const isCheckout = products.length > 0 && !pending
    return (
      <div>
        {products.map((product) =>
          <CartItem
            product={product}
            key={product.id}
            onRemoveItem={() => removeFromCart(product.id)} />)}
        <hr />
        <h4>结算</h4>
        <p>总价：{total}</p>
        <button onClick={() => checkout()} disabled={!isCheckout}>提交结算</button>
        <p>message: {message}</p>
      </div>
    )
  }
}
// 映射属性到props
const mapStateToProps = (state) => {
  return {
    products: getCartProducts(state),
    total: getTotal(state),
    message: getMessage(state),
    pending: getCheckoutPending(state)
  }
}


export default connect(
mapStateToProps,
// 这里直接写为 {} 对象的形式，因为 使用mapDispatchToProps也是返回的对象集合，是两种写法
{ checkout, removeFromCart }
)(Cart)
